<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery效果</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#hide").click(function(){
                // $("#d1").hide();
                // $("#d1").hide(3000);
                // $("#d1").slideUp(2000);
                $("#d1").fadeOut(3000);
            });
            $("#show").click(function(){
                // $("#d1").show();
                // $("#d1").show(3000);
                // $("#d1").slideDown(2000);
                $("#d1").fadeIn(3000);
            });
            $("#hs").click(function(){
                // $("#d1").toggle();
                // $("#d1").toggle(1000);
                // $("#d1").slideToggle(1000);
                // $("#d1").fadeToggle(1000);
                // 在指定毫秒数内,将元素的透明度达到指定的值
                // 透明度范围:0-1
                $("#d1").fadeTo(1000,0.5);
                // 通过代码实现点击指定元素的效果
                $("#hs").click();
            })
        });
    </script>
</head>
<body>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="hs">隐藏或显示</button>
<hr>
<div id="d1" style="width: 30%;background-color: pink;">
    <p>第1个段落</p>
    <p>第2个段落</p>
    <p>第3个段落</p>
    <p>第4个段落</p>
    <p>第5个段落</p>
</div>
</body>
</html>